<template>
  <div class="selector-container">
    <div>
      <p>起点: {{ parseMinuteToTime(pageData.startX) }}</p>
      <input v-model="pageData.startX" :max="pageData.xMax" min="0" type="range"/>
    </div>

    <div>
      <p>结束点: {{ parseMinuteToTime(pageData.endX) }}</p>
      <input v-model="pageData.endX" :max="pageData.xMax" :min="0" type="range"/>
    </div>
    <div>
      <p>目标价: </p>
      <input v-model="pageData.endY" type="number"/>
    </div>
    <div>
      <p>随机扰动: {{ pageData.rand }}</p>
      <input v-model="pageData.rand" step="0.0001" type="number"/>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, watch} from 'vue'

// 注册一个事件
const emit = defineEmits(['dataChange'])

const pageData = reactive({
  startX: 0,
  endX: 0,
  endY: 0,
  xMax: 0,
  rand: 0.001
});
const controller = reactive({
  isInit: false,
});

// 注册props
const props = defineProps({
  startX: {
    type: Number,
    default: 0,
  },
  xMax: {
    type: Number,
    default: 0
  },
  endX: {
    type: Number,
    default: 0,
  },
  endY: {
    type: Number,
    default: 0,
  },
  rand: {
    type: Number,
    default: 0,
  },
})

onMounted(() => {
  pageData.startX = props.startX
  pageData.endX = props.endX
  pageData.endY = props.endY
  pageData.xMax = props.xMax
  pageData.rand = props.rand
  setTimeout(() => {
    controller.isInit = true
  }, 100)
})

let lastPush = 0;
watch(pageData, (newVal) => {
  if (!controller.isInit) {
    return
  }
  // console.log('变化了')
  console.log("新值:",newVal)
  if (Number(newVal.startX) > Number(newVal.endX)) {
    pageData.endX = Math.min(Number(newVal.startX) + 1, pageData.xMax)
  }
  if (Date.now() - lastPush > 10) {
    emit('dataChange', {
      startX: Number(newVal.startX),
      endX: Number(newVal.endX),
      endY: Number(newVal.endY),
      xMax: Number(newVal.xMax),
      rand: Number(newVal.rand),
    })
    lastPush = Date.now()
  }
}, {immediate: false})

const parseMinuteToTime = (num) => {
  // 创建9:30,加上num的分钟数
  return `开市:${num}分钟`;
}
</script>

<style scoped lang="scss">
.selector-container{
  background-color: rgb(245, 245, 245);
  padding: 5px;
  box-sizing: border-box;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 15px;
  color: #2d2c2c;
}

</style>
